<template>
    <ve-ring
            :data="tabledata"
            :judge-width="true"
            :settings='chartSettings'
            height="calc(100% - 4px)"
            :legend="legend"
    ></ve-ring>
</template>

<script>
    export default {
        name: "channeldist",
        data () {
            this.chartSettings = {
                radius: ['15%','75%'],
                offsetY:'50%',
                roseType:'area',
                label:{
                    formatter:'{b}：{c} / {d}%',
                    fontSize:20
                }

            }
            return {
                /*chartData: {
                    columns: ['CHNL_BIZ_NAME', 'ACCS_CNT'],
                    rows: [
                        { 'CHNL_BIZ_NAME': '普通客户', 'ACCS_CNT': 1393 },
                        { 'CHNL_BIZ_NAME': '大客户', 'ACCS_CNT': 3530 },
                        { 'CHNL_BIZ_NAME': '实施', 'ACCS_CNT': 2923 },
                        { 'CHNL_BIZ_NAME': 'VIP客户', 'ACCS_CNT': 1723 },
                        { 'CHNL_BIZ_NAME': '服务', 'ACCS_CNT': 3792 },
                        { 'CHNL_BIZ_NAME': '代理', 'ACCS_CNT': 4593 }
                    ]
                },*/

                legend: {
                    show:false,
                    y: 'bottom',
                    textStyle:{
                        fontSize:16,
                        color:'#fff'
                    },
                    itemWidth :14
                }
            }
        },
        props:['tabledata']
    }
</script>

<style scoped>

</style>
